<template>
	<view class="index">
		<!-- 宽百分百，不要换行 width:100%; white-space:nowrap -->
		<scroll-view 
			scroll-x  
			class="scroll-row border-bottom"
			style="position: fixed; top: 0; left: 0; right: 0;"
		>
			<!-- 设置为行内块 display:inline-block -->
			<view 
				v-for="item in tabbars" 
				:key="item.id" 
				class="scroll-row-item px-3 py-2"
				:class="{'text-main': item.id==tabIndex}"
				@click="tabIndex=item.id"
			>
				{{item.name}}
			</view>
		</scroll-view>
		<!-- 最外侧view，设置一个全局的padding -->
		<view>
			<block v-for="(item,index) in list" :key="index">
				<!-- 公共列表组件 -->
				<common-list 
					class="mb-2" 
					:item="item" 
					:index="index" 
					@follow="follow"
					@doChange="doChange"
				/>
				<!-- 分割线 -->
				<divider/>
			</block>
		</view>
	</view>
</template>

<script>
	import commonList from '@/components/common/common-list.vue' 
	// import divider from '@/components/common/divider.vue'
	
	export default {
		components:{
			commonList,
			// divider
		},
		data() {
			return {
				tabIndex: 1,   //tabbar默认选中项
				tabbars:[
					{name:'关注',id:1},
					{name:'推荐',id:2},
					{name:'体育',id:3},
					{name:'热点',id:4},
					{name:'财经',id:5},
				],
				list: [
					{
						userName:'淋雨一直走',   //用户昵称 
						userpic:'/static/default.jpg',	    //用户头像
						newsTime:'2022-5-13 上午02:20',    //发布时间
						isFollow:false, //是否关注
						title:'过年期间请不要燃放烟花爆竹',       //帖子标题
						titlepic:'/static/demo/datapic/14.jpg',    //帖子图片
						support:{       //点赞
							type: 'up',
							support_count: 1,
							unsupport_count: 2
						},
						comment_count: 2,  //评论数
						share_num: 2       //分享数
					},
					{
						userName:'淋雨一直走',   //用户昵称 
						userpic:'/static/default.jpg',	    //用户头像
						newsTime:'2022-5-13 上午02:20',    //发布时间
						isFollow:true, //是否关注
						title:'过年期间请不要燃放烟花爆竹',       //帖子标题
						titlepic:'',    //帖子图片
						support:{       //点赞
							type: 'down',
							support_count: 1,
							unsupport_count: 2
						},
						comment_count: 2,  //评论数
						share_num: 2       //分享数
					},
					{
						userName:'淋雨一直走',   //用户昵称 
						userpic:'/static/default.jpg',	    //用户头像
						newsTime:'2022-5-13 上午02:20',    //发布时间
						isFollow:false, //是否关注
						title:'过年期间请不要燃放烟花爆竹',       //帖子标题
						titlepic:'/static/demo/datapic/14.jpg',    //帖子图片
						support:{       //点赞
							type: '',
							support_count: 1,
							unsupport_count: 2
						},
						comment_count: 2,  //评论数
						share_num: 2       //分享数
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			// 点关注
			follow(e){
				this.list[e].isFollow = true
				uni.showToast({
					title:'关注成功'
				})
			},
			// 点赞, 点踩
			doChange(e){
				let support = this.list[e.index].support
				support.type = e.type
					// support.support_count ++
				// else if(support.type=='down'){
				// 	uni.showToast({
				// 		title:'请先取消原本评价'
				// 	})
				// }else{
				// 	support.type = ''
				// 	support.support_count --
				// 	uni.showToast({
				// 		title:'取消成功'
				// 	})
				// }
			}
		}
	}
</script>

<style>
</style>
